<html>
<head>
    <title>icon-rotation</title>
    <style type="text/css">
        .mid-div {
            padding-top: 160px;
            margin: 0 auto;
            margin-top: 100px;
            text-align: center;
            width: 500px;
            height: 400px;
        }

        .span-ratation {
            /*background: none repeat scroll 0 0 #EEEEEE;
            border-color: #009933;
            border-radius: 100%;
            border-style: solid;
            border-width: 2px 2px 50px;
            height: 48px;
            position: relative;
            width: 96px;*/
            display: inline-block;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: #66cdaa;
            border: red green blue pink;
            border-width: 15px;
            /* css3 animation */
            -webkit-animation: anim4 1s linear infinite;
            -moz-animation: anim4 2s linear infinite;
            -ms-animation: anim4 1s linear infinite;
            -o-animation: anim4 1s linear infinite;
            animation: anim4 1s linear infinite;
        }

        

        /* css3 keyframes - animation 4 */
        @-webkit-keyframes anim4 {
            from {
                -webkit-transform: rotateZ(0deg);
            }

            50% {
                -webkit-transform: rotateZ(180deg);
            }

            to {
                -webkit-transform: rotateZ(360deg);
            }
        }

        @-moz-keyframes anim4 {
            from {
                -moz-transform: rotateZ(0deg);
            }

            50% {
                -moz-transform: rotateZ(180deg);
            }

            to {
                -moz-transform: rotateZ(360deg);
            }
        }

        @-ms-keyframes anim4 {
            from {
                -ms-transform: rotateZ(0deg);
            }

            50% {
                -ms-transform: rotateZ(180deg);
            }

            to {
                -ms-transform: rotateZ(360deg);
            }
        }

        @-o-keyframes anim4 {
            from {
                -o-transform: rotateZ(0deg);
            }

            50% {
                -o-transform: rotateZ(180deg);
            }

            to {
                -o-transform: rotateZ(360deg);
            }
        }

        @keyframes anim4 {
            from {
                transform: rotateZ(0deg);
            }

            50% {
                transform: rotateZ(180deg);
            }

            to {
                transform: rotateZ(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="mid-div">
        <span class="span-ratation"></span>
    </div>
</body>
</html>